/*
 * @Author: kanglang
 * @Date: 2020-06-24 19:01:26
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-05-27 16:10:47
 * @Description: 顶部导航组件
 */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { px2dp, screenWidth, fontColorCoffee } from '@/styles';

export default class HeadTabs extends Component {
  constructor(props) {
    super(props);
  }

  xmChangeStatus(type) {
    this.props.changeStatus && this.props.changeStatus(type);
  }

  render() {
    const { status, tabSources, innerStyle, tabStyle, activeStyle, style } = this.props;
    return (
      <View style={[styles.headWrap, style]}>
        <View style={[styles.flexB, styles.bWhite, innerStyle]}>
          {
            tabSources.map((item, index) => {
              return (
                <View key={index}>
                  <View>
                    <Text
                      style={status == item.type ? [styles.choose, styles.active, tabStyle, activeStyle] : [styles.choose, tabStyle]}
                      onPress={this.xmChangeStatus.bind(this, item.type)}
                    >
                      {item.tab}
                    </Text>
                  </View>
                  <View style={status == item.type ? [styles.borderActive] : [styles.noborderActive]} />
                </View>);
            })
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headWrap: {
    // paddingBottom: px2dp(12) * 2,
    width: '100%'
  },
  flexB: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  bWhite: {
    backgroundColor: '#fff'
  },
  choose: {
    padding: px2dp(8) * 2,
    paddingBottom: px2dp(10) * 2,
    borderColor: '#FFF',
    color: '#767676',
    fontSize: px2dp(16) * 2,
    textAlign: 'center'
  },
  active: {
    borderColor: fontColorCoffee,
    color: fontColorCoffee,
    fontSize: px2dp(16) * 2,
  },
  borderActive: {
    position: 'absolute',
    bottom: 0,
    width: '55%',
    height: px2dp(3) * 2,
    backgroundColor: fontColorCoffee,
    marginLeft: '18%'
  },
  noborderActive: {
    // width: '50%',
    height: px2dp(3) * 2,
    backgroundColor: 'transparent',
  },
  list: {
    flex: 1,
    width: screenWidth,
  },
  itemFlexB: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: px2dp(16) * 2
  },
  item: {
    borderRadius: px2dp(12) * 2,
    backgroundColor: '#FFF',
    marginBottom: px2dp(12) * 2,
    marginLeft: px2dp(12) * 2,
    marginRight: px2dp(12) * 2,
    padding: px2dp(12) * 2
  },
  mt12: {
    marginTop: px2dp(12) * 2
  },
  text: {
    marginTop: px2dp(40) * 2,
    width: screenWidth - px2dp(32) * 2,
    padding: px2dp(16) * 2,
    flex: 1
  },
  noText: {
    width: screenWidth,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  TextSize: {
    fontSize: px2dp(18) * 2
  }
});
